<script lang="ts" setup>

import { PatientList } from '@/api/type/user';
import { getPatientListAPI } from '@/api/user';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router=useRouter()
const patientList=ref<PatientList>([])
const getList=async()=>{
  const res= await getPatientListAPI()
  patientList.value=res.data
  
}
getList()
</script>

<template>
  <div class="patient">
    <div class="title"> 就诊人管理</div>
   <div class="card">
      <el-card v-for="item in patientList" :key="item.id" class="patient_card">
        <template #header>
           <div class="card-header">
             <div class="info">
              <span class="name">{{item.name}}</span>
              <span>{{item.certificatesNo}}</span>
             </div>
             <div class="detail" @click="router.push(`patient/show?id=${item.id}`)">
              <span>查看详情</span>
              <svg t="1728464799322" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14974" width="12" height="12"><path d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z" p-id="14975" fill="#999999"></path></svg>
             </div>
           </div>
        </template>
        <template #default>
          <div class="el-card__body">
            <div class="card_info">
              <span class="type">自费</span>
            <span class="card_no">{{item.certificatesNo}}</span>
            <span class="card_view">身份证</span>
            </div>
            <div></div>
          </div>
        </template>
     </el-card>
     <el-card class="add_card" @click="router.push('/user/patient/add')">
        <div class="add">+ 添加就诊人</div>
     </el-card>
   </div>
  </div>
</template>

<style lang="scss" scoped>
.patient {
  .title {
    color: #333;
    font-weight: 700;
    margin: 0 30px 40px 0;
  }
  .card {
    margin: 20px 0 0 140px;
    padding-bottom: 30px;
    .patient_card {
      margin-top: 30px;
      padding: 0 30px;
      cursor: pointer;
      .card-header {
        display: flex;
        justify-content: space-between;
        .info {
          .name {
            color: #333;
            font-size: 16px;
            margin-right: 30px;
          }
          span {
            color: #999;
            font-size: 12px;
          }
        }
        .detail {
          color: #999;
          font-size: 14px;
          display: flex;
          align-items: center;
        }
      }
      .el-card__body {
        display: flex;
        justify-content: space-between;
        
        .card_info {
          background-color: #89C4ED;
          height: 50px;
          padding: 0 14px;
          margin-right: 50px;
          display: flex;
          align-items: center;
          border-radius: 10px;
          justify-content: space-between;
          .type {
            color: #89C4ED;
            background-color: #fff;
            border-radius: 3px;
            margin-right: 10px;
            padding: 4px;
            font-size:12px ;
          }
          .card_no {
            color: #fff;
            margin-right: 10px;
          }
          .card_view {
            color: #fff;
            margin-right: 10px;
          }
        }
      
      }
    }
  }
  .add_card {
    margin-top: 30px;
    .add {
    color: #4990F1;
    text-align: center;
    cursor: pointer;
  }
  }

}
</style>